<!-- <script lang="ts">
export default {
  name: 'ifreameBox'
}
</script> -->
<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
import { ref, watch } from 'vue'
import { useNavTabStore } from '@/stores/index'
const baseURL = import.meta.env.VITE_APP_URL
const routerPath = useRouter()
const route = useRoute()
const navTabStore = useNavTabStore()
const defaultNavPathInfo = ref<any>()
const ifreameInfo = ref<any>()
watch(
  () => routerPath.currentRoute.value.path,
  () => {
    defaultNavPathInfo.value = route.meta.attributes
    ifreameInfo.value = defaultNavPathInfo.value.url
    if (route.meta.iframeComponent)
      navTabStore.setIframeCache(ifreameInfo.value, routerPath.currentRoute.value.path)
    // console.log(routerPath.currentRoute.value.path)
    // console.log(newPath, oldPath)
  },
  { immediate: true, deep: true }
)
</script>

<template>
  <div class="bigSecreenBox">
    <div
      v-for="item in navTabStore.iframeCacheArry"
      :key="item.path"
      v-show="item.path === route.fullPath"
      class="ifreameBox"
    >
      <iframe :src="`${baseURL + item.info}`" frameborder="0"></iframe>
    </div>
  </div>
</template>

<style scoped lang="less">
.ifreameBox {
  width: 100%;
  height: calc(100vh - 145px);
  padding: 8px;
  iframe {
    width: 100%;
    height: 100%;
    html {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
